<template>
    <div>
        <a-form layout="horizontal">
            <a-collapse default-active-key="1" :bordered="false">
                <template #expandIcon="props">
                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0"/>
                </template>
                <a-collapse-panel key="1" header="标签设置">
                    <a-form-item label="风格">
                        <a-radio-group v-model="config.tabType" size="small" button-style="solid">
                            <a-radio-button value="line">线型</a-radio-button>
                            <a-radio-button value="card">卡片式</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="选项卡位置">
                        <a-radio-group v-model="config.tabPosition" size="small" button-style="solid">
                            <a-radio-button value="top">顶部</a-radio-button>
                            <a-radio-button value="left">左侧</a-radio-button>
                            <a-radio-button value="right">右侧</a-radio-button>
                            <a-radio-button value="bottom">底部</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-divider>标签页设置</a-divider>
                    <div>
                        <div class="content-header">
                            <div class="header-col header-col-icon"></div>
                            <div class="header-col">标签名</div>
                            <div class="header-col">图标</div>
                            <div class="header-col">显隐</div>
                        </div>
                    </div>
                    <div>
                        <vuedraggable
                            v-model="config.tabs"
                            :group="'gp'"
                            :handle="'.drag-icon'"
                        >
                            <transition-group>
                                <div class="content-body-row" :key="index" v-for="(record,index) in config.tabs">
                                    <div class="header-col header-col-icon">
                                        <i class="iconfont icondrag drag-icon"></i>
                                        <a-icon type="minus-circle" :title="$ti18('rxList.delBtn','删除')" @click="del(record,index)" />
                                    </div>
                                    <div class="header-col">
                                        <a-input v-model="record.name"></a-input>
                                    </div>
                                    <div class="header-col">
                                        <rx-select-icon v-model="record.icon" :baseUrl="baseUrl"></rx-select-icon>
                                    </div>
                                    <div class="header-col" @click="openShowSetting(record)">
                                        <my-icon :style="{'color':record.tabScript?'#1890ff':''}"  class="rx-iconsetup" type="iconsetup_fill"></my-icon>
                                    </div>
                                </div>
                            </transition-group>
                        </vuedraggable>
                        <div class="add-button-content">
                            <!--        增加            -->
                            <span class="add-button" @click="add">
                             <a-icon type="plus-circle" />
                            <span>{{$ti18('rxList.add', '新增')}}</span>
                        </span>
                        </div>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </a-form>
    </div>
</template>

<script>

import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import { Util,RxSelectIcon } from "@lowcode/jpaas-common-lib";
import vuedraggable from 'vuedraggable';
import TabBtnShow from './TabBtnShow.vue'

/**
 * tab容器
 */
export default {
    name: "tab-container-def",
    mixins: [ ComponentDef],
    components: {
        vuedraggable,
        RxSelectIcon
    },
    props: {},
    data() {
        return {
            config: {
                tabType:"line",
                tabPosition:"top",
                tabs:[]
            },
            baseUrl:'',
            //默认tab
            defTabs:[{id: Util.randomId(), name:"Tab1", icon:"", defConf: "", config: ""}, {id: Util.randomId(), name:"Tab2", icon:"", defConf: "", config: ""}]
        }
    },
    created() {
        this.baseUrl = process.env.VUE_APP_ADMIN_FRONT;
        this.init();
    },
    destroyed(){
        this.$emit('dragclick', this.config);
    },
    methods: {
        init(){
            if(this.conf){
                this.config = this.conf;
            }else {
                this.config.tabs.push(...this.defTabs);
            }
        },
        add(){
            this.config.tabs.push({
                id: Util.randomId(),
                name:"",
                icon:"",
                defConf: "",
                config: "",
                active: false
            })
        },
        del(record,index){
            this.config.tabs.splice(index,1);
        },
        openShowSetting(record){
            var config = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                component:TabBtnShow,
                zIndex:9999,
                data: {
                    paramConfig:this.paramConfig?JSON.parse(this.paramConfig):[],
                    tabScript:record.tabScript?record.tabScript:''
                },
                title: '显示条件'
            };
            Util.open(config, function (action, data) {
                if (action == "ok") {
                    record.tabScript = data
                }
            });
        },
    },

}
</script>

<style scoped>
.rx-iconsetup{
    cursor: pointer;
    font-size: 18px;
}
.drag-icon{
    cursor: move;
}
.add-button-content {
    padding: 10px 10px 10px 32px;
}
.add-button{
    cursor: pointer;
}
.add-button:hover{
    color: #4d9eff;
}
.add-button i{
    padding: 4px 6px;
}
.content-body-row,
.content-header{
    display: flex;
    align-items: center;
}
.header-col{
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
}
.header-col.header-col-icon{
    flex: none;
    width: 56px;
    display: flex;
    padding-right: 0;
    align-items: center;
}
.header-col.header-col-icon + .header-col{
    padding-left: 4px;
}
.header-col-icon i{
    padding: 4px;
}
.content-header .header-col{
    line-height: 40px;
}
.content-body-row{
    padding: 6px 0;
    border-bottom: 1px dashed #dedede;
}
</style>